import React from 'react';
import '../../style.less';
import './hiss.less';
import {Spin } from 'antd';
import superagent from 'superagent';
import echarts from 'echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/theme/dark';
import G2 from 'g2';
import Draggable from 'react-draggable';
import { browserHistory } from 'react-router'

function newline(option, number, axis){
    option[axis]['axisLabel']={
        interval: 0,
        formatter: function(params){
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
}
function max(prev, next) {
    return Math.max(prev, next);
}

function min(prev, next) {
    return Math.min(prev, next);
}



let allData,
    xiaguanChart,
    waterSectionChart,
    waterLevelChart;
let waterGateChart1,waterGateChart2;//水闸


let titleStyle = {
    color: '#00e4ff',
    fontSize: 16
};

//相似洪水
let d=new Date();
let nowMonth = d.getMonth() + 1;
nowMonth<10?nowMonth = "0"+nowMonth:1;
let nowDay = d.getFullYear() + "-" + nowMonth + "-" + d.getDate();

function getPreMonth(date) {
    let arr = date.split('-');
    let year = arr[0]; //获取当前日期的年份
    let month = arr[1]; //获取当前日期的月份
    let day = arr[2]; //获取当前日期的日
    let days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中月的天数
    let year2 = year;
    let month2 = parseInt(month) - 1;
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
    }
    let day2 = day;
    let days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    let t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}
let preMonth = getPreMonth(nowDay);


var theme = G2.Util.mix(true, {}, G2.Theme, {
    defaultColor: '#fff',
    labels:{
        label:{
            fill: '#fff'
        }
    },
    colTitle: {
        title: {
            fontSize: 14,
            textAlign: 'center',
            fill: '#fff'
        }
    },
    axis: {
        top: {
            labels: {
                label: { fill: '#fff'} // 底部标签文本的颜色
            }
        },
        bottom: {
            labels: {
                label: { fill: '#fff'} // 底部标签文本的颜色
            }
        },
        left: {
            labels: {
                label: { fill: '#fff'} // 左部标签文本的颜色
            }
        },
        right: {
            labels: {
                label: { fill: '#fff'} // 右部标签文本的颜色
            }
        }
    }
});
G2.Global.setTheme(theme);
function getData(obj) {
    let getAllPos = JSON.parse(localStorage.getItem('allPos4'))

    for(let pos in getAllPos){
        if(getAllPos[pos].left){
            document.getElementById(pos).style.left = getAllPos[pos].left+"px";
            document.getElementById(pos).style.top = getAllPos[pos].top+"px";
        }
    }
    let tm1,tm2
    if(obj.props.location.query.tm1 && obj.props.location.query.tm1){
        tm1 = obj.props.location.query.tm1
        tm2 = obj.props.location.query.tm2
    }else{
        browserHistory.push('/qhh');
    }
    superagent
        .get(window.httpAddress+'/njfx/getQinhuaiDataByTm!FLOOD')
        .query({tm1: tm1, tm2: tm2})
        .end(function (err,res) {
            allData = JSON.parse(res.text)

            obj.setState({loading:false,info: allData})

            xiaguanChart = echarts.init(document.getElementById('xgGraphic'), 'dark');
            waterSectionChart = echarts.init(document.getElementById('waterSection'), 'dark');


            //下关潮位
            let xgWater = allData.xiaguan,xgData = [],xgx = []
            for(let i in xgWater){
                xgData.push(xgWater[i].Z)
                xgx.push(xgWater[i].TM+"时")
            }
            let xiaguanChartOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                title: {
                    text: '下关潮位',
                    left: 'center',
                    textStyle: titleStyle
                },
                legend: {
                    bottom: '0',
                    data:['下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: Math.floor(xgData.reduce(min)*.9),
                    }
                ],
                xAxis: {
                    data: xgx
                },
                series: [

                    {
                        name: "下关潮位",
                        type: "line",
                        data: xgData,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            xiaguanChart.setOption(xiaguanChartOption);


            //主要断面水位

            let waterChannelLegend = [],waterChannelx = [],waterChannelData = [],waterAllData = [],waterChannelColor = ['#F16A65','#ffff00', '#00c000', '#3C7297']
            for(let e in allData.impRiver){
                waterChannelLegend.push(allData.impRiver[e].STNM)
                let temWaterChannel = []
                for(let f in allData.impRiver[e].process){
                    if(e == 0){
                        waterChannelx.push(allData.impRiver[e].process[f].TM)
                    }
                    temWaterChannel.push(allData.impRiver[e].process[f].Z)
                    if(allData.impRiver[e].process[f].Z != null){
                        waterAllData.push(allData.impRiver[e].process[f].Z)
                    }
                }
                waterChannelData[e] = {
                    name: allData.impRiver[e].STNM,
                    type: "line",
                    data: temWaterChannel,
                    itemStyle: {
                        normal: {
                            color: waterChannelColor[e]
                        }
                    }
                }
            }
            let waterChannelChartOption = {
                backgroundColor: "transparent",
                title: {
                    text: '主要断面水位',
                    left: 'center',
                    textStyle: titleStyle
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterChannelLegend
                },
                xAxis: {
                    data: waterChannelx,

                },
                axisPointer: {
                    value: waterChannelx[8],
                    snap: true,
                    lineStyle: {
                        color: '#00e4ff',
                        opacity: 1,
                        width: 2
                    },
                    label: {
                        show: false
                    },
                    handle: {
                        show: true,
                        color: 'transparent'
                    },
                    triggerOn: 'none'
                },
                yAxis: {
                    type: 'value',
                    name: 'm',
                    min: Math.floor(waterAllData.reduce(min)*.9).toFixed(1),
                },
                series: waterChannelData
            }

            waterSectionChart.setOption(waterChannelChartOption);

            //

            let sep = obj.props.location.query.tm2.substring(5)+":00";

            let data1 = allData.qhxhGate, data2 = allData.wdmGate

            var flowChart = new G2.Chart({
                id: 'waterGate1',
                forceFit: true,
                height: 250
            });
            flowChart.source(data1, {
                CNT: {
                    min: 0
                }
            });
            flowChart.axis('TM', {
                formatter: function (val) {
                    return val.replace(/ /,"\n")
                },
                title: null,
                labelOffset: 35,
                labels: {
                    label: {
                        fill: '#fff',
                        fontSize: '12'
                    }
                }
            });
            flowChart.axis('CNT', {
                title: null,
                labels: {
                    label: {
                        fill: '#fff'
                    }
                }
            });
            flowChart.line().position('TM*CNT').color('#ff6535').size(2);
            flowChart.guide().text(['min', 'max'], '开启孔(个)',{fill: '#fff'});
            var rainChart = new G2.Chart({
                id: 'waterGate1',
                forceFit: true,
                height: 180,
                plotCfg: {
                    margin: [5, 80]
                }
            });
            rainChart.source(data1, {
                HEIGHT: {
                    min: 0
                }
            });
            rainChart.axis('TM', {
                formatter: function (val) {
                    return val.replace(/ /,"\n")
                },
                title: null,
                labels: {
                    label: {
                        fill: '#fff',
                        fontSize: '12'
                    }
                }
            });
            rainChart.axis('HEIGHT', {
                title: null
            });
            rainChart.coord().reflect('y');
            rainChart.line().position('TM*HEIGHT').color('#00c000').size(2);
            rainChart.guide().text(['min', 'max'], '开度(m)',{fill: '#fff'});
            flowChart.render();
            rainChart.render();

            rainChart.guide().line([sep,0], [sep,rainChart.getScale('HEIGHT').max],{
                stroke: '#00e4ff', // 线的颜色
                lineDash: [0, 0, 0], // 虚线的设置
                lineWidth: 2
            })
            flowChart.guide().line([sep,0], [sep,flowChart.getScale('CNT').max], {
                stroke: '#00e4ff', // 线的颜色
                lineDash: [0, 0, 0], // 虚线的设置
                lineWidth: 2
            })
            flowChart.render();
            rainChart.render();

            //2

            var flowChart2 = new G2.Chart({
                id: 'waterGate2',
                forceFit: true,
                height: 250
            });
            flowChart2.source(data2, {
                CNT: {
                    tickInterval: 1,
                    min: 0
                }
            });
            flowChart2.axis('TM', {
                formatter: function (val) {
                    return val.replace(/ /,"\n")
                },
                title: null,
                labelOffset: 35,
                labels: {
                    autoRotate: false,
                    label: {
                        fill: '#fff'
                    }
                }
            });
            flowChart2.axis('CNT', {
                title: null,
                labels: {
                    label: {
                        fill: '#fff'
                    }
                }
            });
            flowChart2.line().position('TM*CNT').color('#ff6535').size(2);
            flowChart2.guide().text(['min', 'max'], '开启孔(个)',{fill: '#fff'});
            var rainChart2 = new G2.Chart({
                id: 'waterGate2',
                forceFit: true,
                height: 250,

            });
            rainChart2.source(data2, {
                HEIGHT: {
                    min: 0
                }
            });
            rainChart2.axis('TM', {
                formatter: function (val) {
                    return val.replace(/ /,"\n")
                },
                title: null,
                labels: null
            });
            rainChart2.axis('HEIGHT', {
                title: null
            });
            rainChart2.coord().reflect('y');
            rainChart2.line().position('TM*HEIGHT').color('#00c000').size(2);
            rainChart2.guide().text(['min', 'max'], '开度(m)',{fill: '#fff'});

            flowChart2.render();
            rainChart2.render();

            rainChart2.guide().line([sep,0], [sep,rainChart2.getScale('HEIGHT').max],{
                stroke: '#00e4ff', // 线的颜色
                lineDash: [0, 0, 0], // 虚线的设置
                lineWidth: 2
            })
            flowChart2.guide().line([sep,0], [sep, flowChart2.getScale('CNT').max], {
                stroke: '#00e4ff', // 线的颜色
                lineDash: [0, 0, 0], // 虚线的设置
                lineWidth: 2
            })
            flowChart2.render();
            rainChart2.render();

            console.log(rainChart2.getScale('HEIGHT').max)


            //下关潮位
            // let data3 = allData.xiaguan
            // var chart3 = new G2.Chart({
            //     id: 'xgGraphic',
            //     forceFit: true,
            //     width: 520,
            //     height: 461,
            //     plotCfg: {
            //         margin: [30, 10, 50, 60]
            //     }
            // });
            // chart3.axis('Z', {
            //     title: null
            // });
            // chart3.axis('TM', {
            //     title: null,
            //     formatter: function (val) {
            //         return (val.replace(/ /,"\n")+"时")
            //     },
            //     labels: {
            //         autoRotate: false,
            //         label: {
            //             fill: '#fff'
            //         }
            //     }
            // });
            // chart3.source(data3, {
            //
            // });
            // chart3.line().position('TM*Z').color('#00c000').size(2);
            // chart3.guide().text(['min', 'max'], '水位(m)',{fill: '#fff'});
            // chart3.render();


            // if(waterGateChart1){
            //
            // }else{
            //     //闸孔信息
            //
            //     waterGateChart1 = echarts.init(document.getElementById('waterGate1'), 'dark');
            //     waterGateChart2 = echarts.init(document.getElementById('waterGate2'), 'dark');
            //
            //
            // }
            //
            // let qhxhGateInfo = allData.qhxhGate,xData = [], yData1 = [], yData2 = []
            //
            // for(let i in qhxhGateInfo){
            //     xData.push(qhxhGateInfo[i].TM);
            //     yData1.push(qhxhGateInfo[i].CNT);
            //     yData2.push(qhxhGateInfo[i].HEIGHT);
            // }
            // let waterGateChart1Option = {
            //     backgroundColor: "transparent",
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c}'
            //     },
            //     legend: {
            //         data:['开孔数量','开度'],
            //         x: 'left'
            //     },
            //     xAxis: [
            //         {
            //             axisLine: {onZero: true},
            //             data: xData
            //         },
            //         {
            //             gridIndex: 1,
            //             data: xData,
            //             axisLine: {onZero: true,onZeroAxisIndex: 1},
            //         }
            //     ],
            //     // xAxis: {
            //     //     data: xData
            //     // },
            //     yAxis: [
            //         {
            //             name : '开孔数量(个)',
            //             type : 'value',
            //             max: 12
            //         },
            //         {
            //             gridIndex: 1,
            //             name : '开度(m)',
            //             type : 'value',
            //             axisLine: {onZero: true,onZeroAxisIndex: 1},
            //             inverse: true
            //         }
            //     ],
            //     series: [
            //         {
            //             name : '开孔数量',
            //             type: 'line',
            //             itemStyle:{
            //                 normal:{
            //                     color: '#ff6535'
            //                 }
            //             },
            //             data: yData1
            //         },
            //         {
            //             name : '开度',
            //             type: 'line',
            //             itemStyle:{
            //                 normal:{
            //                     color: '#00c000'
            //                 }
            //             },
            //             data: yData2
            //         }
            //     ]
            // }
            //
            // waterGateChart1.setOption(waterGateChart1Option);
            //
            // //
            //
            //
            // let qhxhGateInfo2 = allData.wdmGate,xData2 = [], yData11 = [], yData12 = []
            //
            // for(let i in qhxhGateInfo2){
            //     xData2.push(qhxhGateInfo2[i].TM);
            //     yData11.push(qhxhGateInfo2[i].CNT);
            //     yData12.push(qhxhGateInfo2[i].HEIGHT);
            // }
            //
            // let waterGateChart2Option = {
            //     backgroundColor: "transparent",
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c}'
            //     },
            //     legend: {
            //         data:['开孔数量','开度'],
            //         x: 'left'
            //     },
            //     yAxis : [
            //         {
            //             name : '开孔数量(个)',
            //             type : 'value'
            //         },
            //         {
            //             gridIndex: 1,
            //             name : '开度(m)',
            //             type : 'value',
            //             inverse: true
            //         }
            //     ],
            //     xAxis: [
            //         {
            //             type : 'category',
            //             data: xData2
            //         },
            //         {
            //             gridIndex: 1,
            //             type : 'category',
            //             data: xData2,
            //             position: 'top'
            //         }
            //     ],
            //     series: [
            //         {
            //             name : '开孔数量',
            //             type: 'line',
            //             itemStyle:{
            //                 normal:{
            //                     color: '#ff6535'
            //                 }
            //             },
            //             data: yData11
            //         },
            //         {
            //             name : '开度',
            //             type: 'line',
            //             yAxisIndex: 1,
            //             xAxisIndex: 1,
            //             itemStyle:{
            //                 normal:{
            //                     color: '#00c000'
            //                 }
            //             },
            //             data: yData12
            //         }
            //     ]
            // }

            // waterGateChart2.setOption(waterGateChart2Option);



        })





}


let allPos4 = {
    totalWrap: {},
    mainWrap: {},
    mapArea: {},
    waterLevelWrap: {},
    waterChannelWrap:{},
    pumpWrap:{},
    emergencyWrap: {},
    dangerWrap:{},
    reservoirWrap: {},
    waterGate: {}
};


localStorage.removeItem('allPos4')
if(localStorage.getItem('allPos4')){

}else{
    localStorage.setItem('allPos4',JSON.stringify(allPos4))
}
//降雨信息
class RainProcess extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let waterInfo = [], info = [];
        this.props.info?info = this.props.info.rain:true;
        for(let i in info){
            waterInfo.push(
                <tr key={i}>
                    <td className="waterInfo1">{info[i].STNM}</td>
                    <td>{info[i].VALUE}</td>
                </tr>
            )

        }
        return(
            <div className="waterChannelWrap">
                {waterInfo?(
                    <div>
                        <table className="hissTable">
                            <thead>
                            <tr>
                                <th>站点</th>
                                <th>累计雨量(mm)</th>
                            </tr>
                            </thead>

                        </table>
                        <div className="tableContainerOne">
                            <table className="hissTable halfTable">
                                <tbody>
                                {waterInfo}
                                </tbody>
                            </table>
                        </div>

                    </div>
                ):(
                    <div></div>
                )}

            </div>
        )
    }
}


//淹积点信息
class FloodProcess extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let floodInfo = [], info = [];
        this.props.info?info = this.props.info.flood:true;
        for(let i in info){
            floodInfo.push(
                <tr key={i}>
                    <td className="waterInfo2">{info[i].STNM}</td>
                    <td>{info[i].VALUE}</td>
                    <td className="waterTime">{info[i].TM}</td>
                </tr>
            )
        }
        return(
            <div className="waterChannel">
                {floodInfo?(
                    <div>
                        <table className="hissTable">
                            <thead>
                            <tr>
                                <th className="waterInfo2">淹积点</th>
                                <th>最大深度(cm)</th>
                                <th className="waterTime">发生时间</th>
                            </tr>
                            </thead>

                        </table>
                        <div className="tableContainer">
                            <table className="hissTable halfTable">
                                <tbody>
                                {floodInfo}
                                </tbody>
                            </table>
                        </div>

                    </div>
                ):(
                    <div></div>
                )}

            </div>
        )
    }
}


//下关潮位
// class XgProcess extends React.Component{
//     constructor(props){
//         super(props);
//     }
//     componentWillReceiveProps(nextProps){
//
//     }
//     render(){
//         let xgInfo = [], info = [];
//         this.props.info?info = this.props.info.xiaguan.process:true;
//         for(let i in info){
//             xgInfo.push(
//                 <tr key={i}>
//                     <td className="waterInfo1">{info[i].TM}时</td>
//                     <td>{info[i].Z}</td>
//                 </tr>
//             )
//
//         }
//         return(
//             <div className="waterChannel">
//                 {xgInfo?(
//                     <div>
//                         <table className="hissTable">
//                             <thead>
//                             <tr>
//                                 <th>时间</th>
//                                 <th>下关潮位(m)</th>
//                             </tr>
//                             </thead>
//
//                         </table>
//                         <div className="tableContainer">
//                             <table className="hissTable halfTable">
//                                 <tbody>
//                                 {xgInfo}
//                                 </tbody>
//                             </table>
//                         </div>
//
//                     </div>
//                 ):(
//                     <div></div>
//                 )}
//
//             </div>
//         )
//     }
// }

//主要断面水位
// class WaterSection extends React.Component{
//     constructor(props){
//         super(props);
//     }
//     componentWillReceiveProps(nextProps){
//
//     }
//     render(){
//         let waterSectionInfo = [], info = [];
//         this.props.info?info = this.props.info.impRiver:true;
//         for(let i in info){
//             waterSectionInfo.push(
//                 <tr key={i}>
//                     <td className="waterInfo2">{info[i].STNM}</td>
//                     <td>{info[i].Z}</td>
//                     <td>{info[i].TM}</td>
//                 </tr>
//             )
//
//         }
//
//         return(
//             <div className="waterChannel">
//                 {waterSectionInfo?(
//                     <div>
//                         <table className="hissTable">
//                             <thead>
//                             <tr>
//                                 <th className="waterInfo2">断面名称</th>
//                                 <th>最高水位</th>
//                                 <th className="waterTime">发生时间</th>
//                             </tr>
//                             </thead>
//
//                         </table>
//                         <div className="tableContainer">
//                             <table className="hissTable halfTable">
//                                 <tbody>
//                                 {waterSectionInfo}
//                                 </tbody>
//                             </table>
//                         </div>
//
//                     </div>
//                 ):(
//                     <div></div>
//                 )}
//
//             </div>
//         )
//     }
// }


//中型水库水位
class Reservoir extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let ReservoirInfo = [], info = [];
        this.props.info?info = this.props.info.impRsvr:true;
        for(let i in info) {
            ReservoirInfo.push(
                <tr key={i}>
                    <td>{info[i].STNM}</td>
                    <td>{info[i].VALUE}</td>
                    <td>{info[i].TM}</td>
                    <td>{info[i].WRZ}</td>
                    <td>{info[i].tmLength}</td>
                </tr>
            )
        }
            return(
                <div className="waterChannel">
                    {ReservoirInfo?(
                        <div>
                            <table className="hissTable">
                                <thead>
                                <tr>
                                    <th className="waterInfo2">水库名称</th>
                                    <th>最高水位(m)</th>
                                    <th>发生时间</th>
                                    <th>汛限水位</th>
                                    <th>超汛限时长</th>
                                </tr>
                                </thead>

                            </table>
                            <div className="tableContainer">
                                <table className="hissTable holeTable">
                                    <tbody>
                                    {ReservoirInfo}
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    ):(
                        <div></div>
                    )}

                </div>
            )


    }
}




class Hiss extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            loading: true,
            isoData:{},
            channelData:{},
            allPos: allPos4
        };

    }

    componentDidMount = () => {
        try{
            this.setState({
                allPos: JSON.parse(localStorage.getItem('allPos4'))
            })
        }catch(err){

        }

        let self = this
        getData(self);


    }


    handleStop = (e,data)=> {
        let target = document.getElementById(data.node.id);
        let changePos = JSON.parse(localStorage.getItem('allPos4'))
        for(let ii in changePos){
            if(ii == data.node.id){
                changePos[ii] = {}
                changePos[ii].left = target.offsetLeft + data.x;
                changePos[ii].top = target.offsetTop + data.y;
            }
        }
        localStorage.setItem('allPos4',JSON.stringify(changePos));

    }

    render() {

        return(
            <Spin spinning={this.state.loading} tip="加载中...">
                <div className="mainWrap tablePage">
                    <div className="pageTitle">
                        南京市秦淮河大数据分析平台({this.props.location.query.tm1.replace(/-/g,'/')}时-{this.props.location.query.tm2.replace(/-/g,'/')}时)
                    </div>
                    <div className="pageHome qhh his">
                        <a className="getBack" href="/ana">返回</a>
                        {/*降雨信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic rainTable selfGraphic hisRain" id="rainTable">
                                <div className="selfTitle">
                                    降雨信息
                                </div>
                                <RainProcess info={this.state.info} />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*淹积点信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic selfGraphic floodPointTable" id="floodPointTable">
                                <div className="selfTitle">
                                    淹积点信息
                                </div>
                                <FloodProcess info={this.state.info} />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*下关潮位信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic selfGraphic waterChannelTable" id="xgTable">
                                {/*<div className="selfTitle">*/}
                                    {/*下关潮位*/}
                                {/*</div>*/}
                                {/*<XgProcess info={this.state.info} />*/}
                                <div id="xgGraphic"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*主要断面水位信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="pumpTable selfGraphic graphic" id="waterSectionWrap">
                                {/*<div className="selfTitle">*/}
                                    {/*主要断面水位*/}
                                {/*</div>*/}
                                {/*<WaterSection info={this.state.info} />*/}
                                <div id="waterSection"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*中小型水库水位*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic selfGraphic reservoirTable" id="reservoirTable">
                                <div className="selfTitle">
                                    中型水库水位
                                </div>
                                <Reservoir info={this.state.info} />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>


                        {/*秦淮河新闸工情*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic selfGraphic" id="waterGate1Wrap">
                                <div className="selfTitle">秦淮河新闸工情</div>
                                <div id="waterGate1" className="waterGate"></div>
                                <div className="graphicLeft"></div><div className="graphicRight"></div>
                            </div>
                        </Draggable>

                        {/*武定门闸工情*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic selfGraphic" id="waterGate2Wrap">
                                <div className="selfTitle">武定门闸工情</div>
                                <div id="waterGate2" className="waterGate"></div>
                                <div className="graphicLeft"></div><div className="graphicRight"></div>
                            </div>
                        </Draggable>

                    </div>
                </div>
            </Spin>
        )
    }
}

export default Hiss;
